<template>

	<div id="index">

		<dv-full-screen-container class="bg">
			<dv-loading v-if="loading">Loading...</dv-loading>
			<div v-else class="host-body">
				<div class="header">
					<screen-header></screen-header>
				</div>
				<div class="content">
					<el-row style="height: 50%;">
						<el-col style="height: 100%;">
							<el-row style="height: 100%; ">
								<!-- 上半部分 -->
								<el-col style="height:100%; display: flex;flex-direction: row;">
									<div class="left"
										style=" height: 100%;flex: 2.5; flex-direction: column; align-items: stretch;">
										<dv-border-box-1 style="height: 100%;">
											<Location></Location>
										</dv-border-box-1>
										<!-- <dv-border-box-8 style="height: 30%;">
											<inven-status></inven-status>
										</dv-border-box-8> -->
										<!-- <dv-border-box-12 style="height: 40%;">
											<skuCount></skuCount>
										</dv-border-box-12> -->

									</div>
									<div class="left"
										style="height: 100%; flex: 3; flex-direction: column; align-items: stretch; ">
										<dv-border-box-10 style="height: 100%;">
											<!-- <topology-info></topology-info> -->
											<Task-info></Task-info>
										</dv-border-box-10>
									</div>
									<div class="left"
										style="height: 100%; flex: 2; flex-direction: column; align-items: stretch;">
										<dv-border-box-13 style="height: 100%;">
											<DdjalarmInfo></DdjalarmInfo>
										</dv-border-box-13>
										<!-- <dv-border-box-12 style="height: 45%;">
											<city-num></city-num>
										</dv-border-box-12> -->
									</div>

								</el-col>
							</el-row>

							<!-- <el-row style="height: 30%;"> -->
							<!-- 下半部分 -->
							<!-- <el-col style="height:100%;display: flex; flex-direction: row;justify-content: flex-start;">
									<dv-border-box-1 style="height: 100%; width: 30%;">
										<cpu-top></cpu-top>
									</dv-border-box-1>
									<dv-border-box-4 style="height: 100%; width: 70%; " :color="['#6a3ff5', '#4529a2']">
										<alarm-list></alarm-list>
									</dv-border-box-4>
								</el-col> -->
							<!-- </el-row> -->

						</el-col>

					</el-row>
					<el-row style="height: 40%;">
						<el-col style="height: 100%;">
							<el-row style="height: 100%; ">
								<!-- 上半部分 -->
								<el-col style="height:100%; display: flex;flex-direction: row;">
									<div class="left"
										style=" height: 100%;flex: 2; flex-direction: column; align-items: stretch;">
										<!-- 	<dv-border-box-1 style="height: 100%;">
											<Location></Location>
										</dv-border-box-1> -->
										<!-- <dv-border-box-8 style="height: 30%;">
											<inven-status></inven-status>
										</dv-border-box-8> -->
										<dv-border-box-12 style="height: 100%;">
											<skuCount></skuCount>
										</dv-border-box-12>

									</div>
									<div class="left"
										style=" height: 100%;flex: 1; flex-direction: column; align-items: stretch;">

										<dv-border-box-8 style="height: 100%;">
											<DdjalarmInfoNew></DdjalarmInfoNew>

										</dv-border-box-8>

									</div>
									<div class="left"
										style="height: 100%; flex: 3.5; flex-direction: column; align-items: stretch; ">
										<dv-border-box-9 style="height: 100%;">
											<!-- <topology-info></topology-info> -->
											<near30Days></near30Days>
										</dv-border-box-9>
									</div>
									<div class="left"
										style="height: 100%; flex: 2.5; flex-direction: column; align-items: stretch;">
										<dv-border-box-13 style="height: 100%;">
											<nearYear></nearYear>
										</dv-border-box-13>
										<!-- <dv-border-box-12 style="height: 45%;">
											<city-num></city-num>
										</dv-border-box-12> -->
									</div>

								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</div>
			</div>
		</dv-full-screen-container>
	</div>
</template>
<script>
	//import api from './http/api'
	import ScreenHeader from './screen/screenHeader.vue'
	import InvenStatus from './screen/subInven.vue'
	import CpuTop from './screen/cpuTop.vue'
	import StorageTop from './screen/storageTop.vue'
	import AlarmList from './screen/alarmList.vue'
	import AlarmInfo from "./screen/alarmInfo.vue"
	import TopologyInfo from "./screen/topologyInfo.vue";
	import CityInfo from "./screen/cityInfo.vue";
	import CityNum from "./screen/cityNum.vue";
	import TaskInfo from "./screen/taskInfo1.vue";
	import Location from "./screen/location.vue";
	import skuCount from "./screen/skuCount.vue";
	import DdjalarmInfo from "./screen/inventorAlarm.vue";
	// import DdjalarmInfo from "./screen/DdjalarmInfo.vue";
		import DdjalarmInfoNew from "./screen/DdjalarmInfoNew.vue";
	import near30Days from "./screen/near30Days.vue";
	import nearYear from "./screen/nearYear.vue";

	export default {
		components: {
			CityInfo,
			CityNum,
			InvenStatus,
			CpuTop,
			AlarmList,
			AlarmInfo,
			TopologyInfo,
			StorageTop,
			ScreenHeader,
			TaskInfo,
			Location,
			skuCount,
			DdjalarmInfo,
			DdjalarmInfoNew,
			near30Days,
			nearYear
		},
		data() {
			return {
				loading: true,

			}
		},
		mounted() {
			/* 	this.fetchData(); */

			this.$nextTick(() => {
				/* this.handleFullScreen(); //报错，未解决 */
				this.cancelLoading();
			});

		},

		methods: {



			cancelLoading() {
				setTimeout(() => {
					this.loading = false;
				}, 500);
			},
			fetchData() {

			}
		},

	}
</script>

<style lang="scss" scope>
	/* @import "../assets/scss/index.scss"; */

	.bg {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 0.2rem 0.2rem 0 0.2rem;
		background-image: url("../assets/pageBg1.png");
		background-size: cover;
		background-position: center center;
		color: white;

	}

	.host-body {
		flex: 1;
		flex-direction: column;
		justify-content: space-around;

		.header {
			width: 100%;
			height: 80px;
			flex: 2;
		}

		.content {
			flex: 2;
			width: 100%;
			height: calc(100% - 25px);
		
		}

	}

	.systime {
		color: #5cd9e8;
		font-size: 16px !important;
		font-weight: 800;
		margin-left: 10px;
	}
</style>
